<template>
  <div class="comment-list">
    <div v-for="(comment, index) in comments" 
         :key="index" 
         class="comment-item"
         @click="copyComment(comment)"
    >
      <div class="comment-content">
        <div class="comment-text">{{ comment }}</div>
      </div>
      <div class="copy-tip">
        <el-icon><CopyDocument /></el-icon>
        <span>点击复制</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CopyDocument } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  comments: {
    type: Array,
    default: () => []
  }
})

// 复制评论功能
const copyComment = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage({
      message: '评论已复制到剪贴板',
      type: 'success',
      duration: 2000
    })
  } catch (err) {
    ElMessage({
      message: '复制失败，请手动复制',
      type: 'error',
      duration: 2000
    })
  }
}
</script>

<style scoped>
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

.comment-item {
  position: relative;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid #eee;
}

.comment-item:hover {
  background: #f0f2f5;
  border-color: #e0e0e0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  word-break: break-word;
}

.copy-tip {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.comment-item:hover .copy-tip {
  opacity: 1;
}

.copy-tip .el-icon {
  font-size: 14px;
}

.comment-item:active {
  transform: scale(0.98);
}
</style> 